<template>
    <div class="app-container">
        <div class="query-container">
            <el-row type="flex" justify="space-between">
                 <el-col :span="6">
                    <i class="el-icon-search"></i>
                    <span>用户列表</span>
                 </el-col>
                 <el-col :span="8"></el-col>
                 <el-col :span="4">
                 </el-col>
            </el-row>
            <div>
                <!-- <el-form
                    :inline="true"
                    size="small">
                    <el-form-item label="账号">
                        <el-input
                            class="input-width"
                            placeholder="账号"
                            clearable></el-input>
                    </el-form-item>
                </el-form> -->
            </div>
        </div>
        <div style="margin-left: 20px">
            <el-button size="mini" type="danger" @click="refresh">
                刷新
            </el-button>
            <el-button
                size="mini" 
                type="primary"
                class="btn-add"
                @click="addPage()"
                >添加</el-button
            >
        </div>
        <div class="table-container">
            <el-table
                ref="roleTable"
                :data="list"
                style="width: 100%"
                border>
                <el-table-column label="序号" width="100" align="center" type="index"></el-table-column>
                <el-table-column label="账号" align="center" property="loginName"></el-table-column>
                <el-table-column label="添加时间" width="250" align="center" property="createTime"></el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="updatePage(scope.row)">
                            编辑
                        </el-button>
                        <el-button size="mini" type="text" @click="deletePage(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <!-- <el-pagination
                background
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="pageNum"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30]"
                :total="total"
            >
            </el-pagination> -->
        </div>
        <div class="ops-dialog">
            <el-dialog :title="edit == 1 ? '添加账号': '修改账号'" :visible.sync="editVisible" width="35%">
                <el-form :model="userInfo" :rules="rules" ref="userForm">
                    <el-form-item label="账号" label-width="80" prop="loginName">
                        <el-input v-model="userInfo.loginName" autocomplete="off" :readonly="loginNameReadonly"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" label-width="80" prop="password">
                        <el-input type="password" v-model="userInfo.password" autocomplete="off" show-password></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doEdit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {doAddReq, listUserReq, deleteUserReq, updateUserReq} from '@/api/user'

export default {
    name: "UserIndex",
    data() {
        return {
            userInfo: {
                loginName: '',
                password: ''
            },
            rules: {
                loginName: [
                    {required: true, message: "请输入账号", trigger: "blur" }
                ],
                password: [
                    {required: true, message: "请输入密码", trigger: "blur" }
                ]
            },
            loginNameReadonly: false,
            edit: 1, //1 添加 2:修改
            editVisible: false,
            list: []
        }
    },

    created() {
        this.listUser()
    },

    methods: {
        listUser() {
            listUserReq().then(res => {
                this.list = res.data.records
            })
        },
        refresh() {
            this.listUser()
        },
        addPage() {
            let userForm = this.$refs['userForm']
            if(userForm) {
                userForm.resetFields()
            }
            this.userInfo = {}
            this.editVisible = true
            this.loginNameReadonly = false
            this.edit = 1
        },
        doAdd() {
            this.$refs['userForm'].validate((valid) => {
                if(!valid) {
                    return 
                }
                doAddReq(this.userInfo).then(res => {
                    if(!res) {
                        return 
                    }
                    this.refresh()
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                    this.editVisible = false
                })
            })
        },
        doEdit() {
            if(this.edit === 1) {
                this.doAdd()
            } else {
                this.doUpdate()
            }
        },
        doUpdate() {
            updateUserReq(this.userInfo).then(res => {
                if(!res) {
                    return 
                }
                this.$message({
                    type: 'success',
                    message: res.msg
                })
                this.editVisible = false
            })
        },
        updatePage(row) {
            let userForm = this.$refs['userForm']
            if(userForm) {
                userForm.resetFields()
            }
            this.userInfo = {
                loginName: row.loginName
            }
            this.editVisible = true
            this.loginNameReadonly = true
            this.edit = 2
        },
        deletePage(row) {
            let msg = `确定删除账号【${row.loginName}】?`
            this.$confirm(msg, '提示', {
                type: 'warning'
            }).then( () => {
                deleteUserReq(row.loginName).then(res => {
                    if(!res) {
                        return 
                    }
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                    this.refresh()
                })
            }).catch(() => {})
        }
    }
};
</script>

<style scoped>
</style>